<script>
    document.addEventListener('DOMContentLoaded',function(){
        document.getElementById('getMessage').onclick=function(){
            req=new XMLHttpRequest();
            req.open("GET",'/json/cats.json',true);
            req.send();
            req.onload=function(){
                json=JSON.parse(req.responseText);
                var html = "";
                // 在这行下面添加代码
                json.forEach(item=>{
                    const keys = Object.keys(item);
                    html += '<div class="cat">';
                    keys.forEach(key=>{
                        html += '<strong>' + key + '</strong>: ' + item[key] + '<br>'
                    })
                    html += '</div><br>';
                });


                // 在这行上面添加代码
                document.getElementsByClassName('message')[0].innerHTML=html;
            };
        };
    });
</script>
<style>
    body {
        text-align: center;
        font-family: "Helvetica", sans-serif;
    }
    h1 {
        font-size: 2em;
        font-weight: bold;
    }
    .box {
        border-radius: 5px;
        background-color: #eee;
        padding: 20px 5px;
    }
    button {
        color: white;
        background-color: #4791d0;
        border-radius: 5px;
        border: 1px solid #4791d0;
        padding: 5px 10px 8px 10px;
    }
    button:hover {
        background-color: #0F5897;
        border: 1px solid #0F5897;
    }
</style>
<h1>Cat Photo Finder</h1>
<p class="message box">
    The message will go here
</p>
<p>
    <button id="getMessage">
        Get Message
    </button>
</p>